<template>
    <!-- svg：图标外层容器节点，内部需要与use标签结合使用 -->
    <svg :style="{ width, height }">
      <!-- xlink:href ：决定使用哪个图标 -->
      <!-- 第一种前缀方法 -->
      <!-- <use :xlink:href="prefix+name" :fill="color"></use> -->
      <!-- 第二种前缀方法 -->
      <use :xlink:href="icon" :fill="color"></use>
    </svg>
  </template>
   
  <script setup lang="ts">
  import { computed } from 'vue';
  const props = defineProps({
    // xlink:href属性值的前缀-------第一种方法
    prefix: {
      type: String,
      default: '#icon-',
    },
    // 提供使用属性的明智
    name: String,
    //   图标的颜色
    color: {
      type: String,
      default: '',
    },
    //   接收父组件传递过来图标的宽高
    width: {
      type: String,
      default: '16px',
    },
    height: {
      type: String,
      default: '16px',
    },
  });
   // xlink:href属性值的前缀------第二种方法
  let icon = computed(() => {
    return `#icon-${props.name}`;
  });
  </script>
   
  <style scoped></style>